<template>
  <view class="min100" style="padding-bottom: 128rpx">
    <view class="status_bar"></view>

    <view class="back">
      <image src="/static/back.png" @click="handleBack" class="back-img"></image>
			<!-- #ifdef APP-PLUS -->
			<!-- <image src="/static/share.png" mode="" class="share" @click="changShare"></image> -->
			<!-- #endif -->
    </view>

    <view>
      <!-- 头部 -->
      <!-- <view class="image-wrap"> -->
        <image :src="info.images" class="collectImg" mode="aspectFill"></image>
      <!-- </view> -->

      <view class="topWrap white plr-20">
        <view>
          <view class="size-36 mtb-20">
            {{ info.name }}
          </view>
          <view class="flex flex-start size-22 mb-30">
            <view class="tipsLeft bg-gold color-1a mr-10 ptb-4 plr-10 radius-6">
              {{ info.goods_category_name }}
            </view>
            <view class="flex flex-start mr-10">
              <view class="tipsLeft bg-gold color-1a plr-10 ptb-4" style="border-radius: 6rpx 0 0 6rpx;line-height: 32rpx;"> 限量 </view>
              <view class="tipsRight gold ptb-4 plr-10" style="border-radius: 0 6rpx 6rpx 0;line-height: 32rpx;">
                {{ info.stock }}
              </view>
            </view>
            <view class="tipsRight gold ptb-4 red plr-10 radius-6" v-if="info.label">
              {{ info.label }}
            </view>
          </view>
		  <view class="white flex flex-start size-28">
		    <image :src="info.author_image" class="userImg mr-20"></image>
		  	<view class="size-24">{{ info.author_name }}</view>
		  </view>
        </view>
      </view>
		
		<view class="plr-20">
			<view class="mb-30 mt-30 radius-8" style='background-color: #fff'>
			  <!-- 介绍 -->
			  <view class=" plr-20 gray-2 authCon ptb-30">
				<!-- <view class="flex mb-30">
				  <view class="">
					合约地址
				  </view>
				  <view class="flex" style="width: 70%" @click="copyAddress(info.contract)">
					<view class="rightText bold text-ellipsis" style="width: 90%">
					  {{ info.contract }}
					</view>
					<image class="copyImg ml-20" src="../../static/copy.png" mode=""></image>
				  </view>
				</view>

				<view class="flex mb-30">
				  <view class=""> 认证标识 </view>
				  <view class="flex" style="width: 70%" @click="copyAddress(info.meta_data)">
					<view class="rightText bold text-ellipsis" style="width: 90%">
					  {{ info.meta_data }}
					</view>
					<image class="copyImg ml-20" src="../../static/copy.png" mode=""></image>
				  </view>
				</view>
				<view class="flex mb-30">
				  <view class=""> 认证标准 </view>
				  <view class="flex">
					<view class="red bold">
					  {{ info.attribute }}
					</view>
				  </view>
				</view>
				<view class="flex mb-30">
				  <view class=""> 认证网络 </view>
				  <view class="flex">
					<view class="red bold">
					  {{ info.network_name }}
					</view>
				  </view>
				</view> -->

				<view class="flex">
				  <view class="size-28 white"> 发行方 </view>
				  <view class="flex">
					<view class="white size-28">
					  {{ info.issuer }}
					</view>
				  </view>
				</view>
			  </view>
			</view>
	  </view>

      <!-- 介绍 -->
      <view class="plr-20" v-if="info.content">
		  <view>
		    <view class="mb-20 size-34 white"> 作品故事 </view>
		    <view class="white infoWrap" v-if="isShow" v-html="info.content"> </view>
		  </view>
		  <copyright></copyright>
	  </view>
		
    </view>

    <view class="btmWrap flex flex-between">
      <view class="flex flex-center">
				<text class="gold size-44 bold">￥{{ info.price }}</text>
				<!-- <text class="" style="color: #ED1C1C;margin-left: 20px;font-size: 24rpx;" @click="gorecharge" v-if="Number(info.price) > walletAccount">余额不足，请充值</text> -->
			</view>
      <view class="">
        <button class="mtb-30 buyBtn" hover-class="none" :disabled="btnDisabled" @click="toBuy" v-if="info.status == 1">
					<view class="white size-30">立即购买</view>
					<!-- <view class="size-20 color-c2">剩余{{ info.surplus }}份</view> -->
				</button>

        <view class="itemTips radius-40 plr-60 ptb-15" v-if="info.status == 2">
          {{ info.status_text }}
        </view>

        <view class="button bg-gold color-1a" v-if="info.status == 3">
          <view class="">
            {{ info.status_text }}
          </view>
          <view class="">
            {{ info.status_time_text }}
          </view>
        </view>

        <view class="itemTips radius-40 plr-60 text-center ptb-15" v-if="info.status == 4">
          <view class="">
            {{ info.status_text }}
          </view>
          <u-count-down
            :timestamp="info.diff_time"
            bg-color="background:transparent"
            color="#333"
            font-size="24"
            separator-color="#333"
            style="margin-left: 5rpx"
						@end="endTime"
          ></u-count-down>
        </view>
      </view>
    </view>
		<!-- 分享海报 S -->
		<u-popup v-model="shareShow" :mask-custom-style="{background: 'rgba(0, 0, 0, 0.8)'}" width="92%" mode="top" :mask-close-able="false">	
			<view class="poster pl-30 pr-30 pt-124">
				<view class="poster-main relative">
					<image src="/static/close1.png" mode="" class="close" @click="shareShow = false"></image>
					<image :src="info.images" mode="aspectFill" class="poster-img"></image>
					<view class="poster-con pt-30 pl-30 pb-60 pr-30">
						<view class="white size-36 f-bold">{{ info.name }}来袭，数字藏品</view>
						<view class="size-30 color-c2 mt-20 mb-40">发现一款超赞的数字藏品，快来看看</view>
						<view class="flex ptb-35 pr-20 pb-35 pl-30 radius-30" style="background: #1D1E22;">
							<view class="">
								<view class="size-36 white">闪鸟数字藏品</view>
								<view class="color-c2 size-26 mt-20">扫码打开闪鸟AP，发现更多</view>
							</view>
							<image src="/static/mine/code.png" mode="aspectFill" class="qrCode"></image>
						</view>
					</view>
					
				</view>
				<view class="invite-footer mt-40 flex1 flex-center">
					<view class="invite-footer-li flex1 flex-middle" v-for="(item,index) in shareList" :key="index"
						@click="share(item.type)">
						<image :src="item.image" mode=""></image>
						<view class="size-24 white">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 分享海报 E -->
		<!-- 海报 position: fixed;left: 10000px;top: 10000px; -->
		<canvas canvas-id="myCanvas" style="width: 690rpx;height: 1060px;position: fixed;left: 10000px;top: 10000px;" width="690" height="1060"></canvas>
  </view>
</template>

<script>
	import copyright from '@/components/Copyright.vue'
export default {
	components:{copyright},
  data() {
    return {
      btnDisabled: false,
      id: '',
      info: {},
			walletAccount:0,
			shareShow:false,//
			shareList: [
				// {
				// 	name: '微信',
				// 	image: '/static/mine/wx.png',
				// 	type: 1
				// },
				// {
				// 	name: '朋友圈',
				// 	image: '/static/mine/Circle.png',
				// 	type: 2
				// },
				{
					name: '保存海报',
					image: '/static/mine/poster.png',
					type: 3
				}
			],
			shareMessage:{},
			isShow:false,//
    }
  },
  onLoad(options) {
    this.id = options.id
  },
	onShow() {
		this.getDetails()
		// this.getfenXiang()
	},
	onPageScroll ({scrollTop}) {
		if (scrollTop > 100) {
			this.isShow = true
		}
	},
	onPullDownRefresh() {
		this.isShow = true
		uni.stopPullDownRefresh()
	},
  methods: {
		nextStep () {
			uni.switchTab({
				url:'/pages/my/index'
			})
		},
		endTime () {
			this.getDetails()
		},
		changShare () {
			this.shareShow = true
			this.creatPoster()
		},
		getfenXiang() {
			this.$http('api/Newapi/fenXiang').then(res => {
				this.shareMessage = res;
			})
		},
		//获取详情
		getDetails () {
			this.$http('api/goods/goodsDetail', {
				id: this.id,
			}).then(res => {
				this.info = res
				this.getAccount()
			})
		},
		share(type) {
			if (type != 3) {
				uni.share({
					provider: "weixin",
					scene: type == 1 ? "WXSceneSession" : 'WXSceneTimeline',
					type: 1,
					summary: this.shareMessage.register_url,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			} else {
				uni.showLoading({
					title: '图片保存中'
				})
				let ratio = 750 / uni.getSystemInfoSync().windowWidth
				uni.canvasToTempFilePath({
						x:0,
						y:0,
						canvasId: 'myCanvas',
						width:345,
						height:530,
						quality:1,
						success:(res)=> {
							//保存图片至相册
							// #ifndef H5
							// 除了h5以外的其他端
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success(res) {
									this.flag = true
									uni.hideLoading()
									uni.showToast({
										title: '图片保存成功，可以去分享啦~',
										duration: 2000,
										icon: 'none'
									})
								},
								fail() {
									uni.showToast({
										title: '保存失败，稍后再试',
										duration: 2000,
										icon: 'none'
									})
									uni.hideLoading()
								}
							})
							// #endif
				
							// #ifdef H5
							// h5的时候
							uni.showToast({
								title: '请长按保存',
								duration: 3000,
								icon: 'none'
							})
							// #endif
						},
						fail(res) {
							uni.showToast({
								title: '保存失败，稍后再试',
								duration: 2000,
								icon: 'none'
							})
							uni.hideLoading()
						}
					},
					this
				)
			}
			this.shareShow = false
		},
		gorecharge () {
			uni.navigateTo({
				url:'/pages/my/recharge'
			})
		},
		//获取余额
		getAccount () {
			this.$http('api/account/account').then(res => {
				this.walletAccount = res.account;
			}).catch(err=>{
				console.log(err);
			})
		},
    handleBack() {
      if (getCurrentPages().length === 1) {
        uni.switchTab({
          url: '/pages/home/index',
        })
      } else {
        uni.navigateBack()
      }
    },
		async creatPoster() {
			let ratio = 750 / uni.getSystemInfoSync().windowWidth
			uni.showLoading({
				title: '海报生成中'
			})
			var ctx = uni.createCanvasContext('myCanvas')
			ctx.crossOrigin = "anonymous";
			ctx.clearRect(0, 0, 690 / ratio, 1060 / ratio) //清空之前的海报
		
			ctx.draw() //清空之前的海报
		
		
			await this.drawSquarePic(ctx, 0, 0, 690 / ratio, 1060 / ratio, 10 / ratio, '', '#15151C');
		
			await this.drawSquarePic(ctx, 0 / ratio, 0 / ratio, 690 / ratio, 690 / ratio, 0 / ratio, this.info.images);
			
			await this.drawTextReturnH(ctx, this.info.name + '来袭，数字藏品', 40 / ratio, 760 / ratio, 690 / ratio, 36 / ratio,'#FFFFFF', '', 1, 2)
			await this.drawTextReturnH(ctx, '发现一款超赞的数字藏品，快来看看', 40 / ratio, 820 / ratio, 690 / ratio, 30 / ratio,'#C2C2C2', '', 1, 2)
			await this.drawSquarePic(ctx, 40 / ratio, 860 / ratio, 600 / ratio, 150 / ratio, 30 / ratio, '', '#1D1E22');
			
			await this.drawTextReturnH(ctx, '闪鸟数字藏品', 70 / ratio, 930 / ratio, 690 / ratio, 36 / ratio,'#FFFFFF', '', 1, 2)
			await this.drawTextReturnH(ctx, '扫码打开闪鸟AP，发现更多', 70 / ratio, 970 / ratio, 690 / ratio, 26 / ratio,'#C2C2C2', '', 1, 2)
			await this.drawSquarePic(ctx, 490 / ratio, 873 / ratio, 124 / ratio, 124 / ratio, 0, this.shareMessage.qr_code_image);
		
		
			
			// await this.drawTextReturnH(ctx, '邀请码：' + this.info.uuid, 170 / ratio, 750 / ratio, 240 / ratio, 30 / ratio,
			// 	'#37DC6D', '', 1, 2)
		
			uni.hideLoading()
		},
    toBuy() {
      this.btnDisabled = true
      this.$http('api/orders/goodsApply', {
        id: this.id,
      }).then(res => {
        this.btnDisabled = false
        uni.navigateTo({
          url: '../pay/collectPay?order_id=' + res.order_id,
        })
      }).catch((err)=>{
				 this.btnDisabled = false
				// console.log(err);
			})
    },
    // 复制
    copyAddress(val) {
      // #ifdef APP-PLUS
      uni.setClipboardData({
        data: val,
        success: function () {
          uni.hideToast()
          uni.getClipboardData({
            success: function (res) {
              uni.showToast({
                title: '复制成功',
                icon: 'none',
              })
            },
          })
        },
      })
      // #endif
      // #ifdef H5
      let that = this
      this.$copyText(val).then(
        function (e) {
          uni.showToast({
            title: '复制成功!',
            icon: 'none',
          })
        },
        function (e) {
          uni.showToast({
            title: '复制失败!',
            icon: 'none',
          })
        }
      )
      // #endif
    },
		drawSquarePic(ctx, x, y, w, h, r, url, color) {
			ctx.save()
			ctx.beginPath()
			// 绘制左上角圆弧
			ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
			// 绘制border-top
			// 画一条线 x终点、y终点
			ctx.lineTo(x + w - r, y)
			// 绘制右上角圆弧
			ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
			// 绘制border-right
			ctx.lineTo(x + w, y + h - r)
			// 绘制右下角圆弧
			ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
			// 绘制左下角圆弧
			ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
			// 绘制border-left
			ctx.lineTo(x, y + r)
			// 填充颜色(需要可以自行修改)
			ctx.setFillStyle(color)
			ctx.fill()
			// 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore 这个很重要 不然没办法保存
			ctx.clip()
			// 绘制图片
			return new Promise((resolve, reject) => {
				if (url) {
					uni.getImageInfo({
						src: url,
						success(res) {
							ctx.drawImage(url, x, y, w, h)
							ctx.restore() //恢复之前被切割的canvas，否则切割之外的就没办法用
							ctx.draw(true)
							resolve()
						},
						fail(res) {
							uni.showToast({
								title: '请检查网络',
								duration: 2000,
								icon: 'none'
							})
						}
					})
				} else {
					ctx.restore() //恢复之前被切割的canvas，否则切割之外的就没办法用
					ctx.draw(true)
					resolve()
				}
			})
		},
		drawTextReturnH(
			ctx,
			text,
			x,
			y,
			maxWidth = 200,
			fontSize = 14,
			color = '#333333',
			lineHeight = 1,
			textAlign = 'left',
			index
		) {
			let arrText = text.split('')
			let line = ''
		
			ctx.font = index == 0 ? 'normal bold ' + fontSize + 'px PingFang SC' : fontSize +
				'px PingFang SC' //设置字体大小，注意：百度小程序 用ctx.setFontSize设置字体大小后，计算字体宽度会无效
			ctx.setFillStyle(color) //设置字体颜色
			var chr = text.split(""); //这个方法是将一个字符串分割成字符串数组
			var temp = "";
			var row = [];
			for (var a = 0; a < chr.length; a++) {
				if (ctx.measureText(temp).width < maxWidth) {
					temp += chr[a];
				} else {
					a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
					row.push(temp);
					temp = "";
				}
			}
			row.push(temp);
			if (row.length == 1) {
		
				ctx.fillText(index == 1 ? text.substring(0, 4) + (text.length > 4 ? '...' : '') : text, x, y)
		
			} else {
		
				ctx.fillText(index == 1 ? row[0].substring(0, 4) + (row[0].length > 4 ? '...' : '') : row[0], x, y);
			}
			ctx.draw(true)
			// ctx.draw(
			// 	true) //本次绘制是否接着上一次绘制。即 reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false。
			// return y
		},
  },
}
</script>

<style lang="less" scoped>
page{
	background: #f5f5f5;
}
.white {
  color: #3c3c3c;
}
.gold {
  color: #9c8b66;
}
.back {
  position: relative;
  height: 0;
  .back-img {
    position: absolute;
    width: 20rpx;
    height: 36rpx;
    top: 30rpx;
    left: 30rpx;
	z-index: 99;
  }
	.share {
		width: 44rpx;
		height: 44rpx;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}
}

.collectImg {
    width: 100%;
    height: 450rpx;
}

.userImg {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
}

.buyBtn {
  width: 240rpx;
  height: 68rpx;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
  background: linear-gradient(90deg, #EEA634, #DE2D32);
  border-radius: 34rpx;
}

.copyImg {
  width: 24rpx;
  height: 24rpx;
}

.btmWrap {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  background: #fff;
  // background: brown;
  height: 118rpx;
  box-sizing: border-box;
  padding: 15rpx 30rpx;
  .button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 68rpx;
    border-radius: 34rpx;
    font-size: 24rpx;
    padding: 0 34rpx;
    line-height: 34rpx;
  }
}

.tipsRight {
  background: rgba(255, 255, 255, 0.2);
}

.infoWrap {
  /deep/ img {
    width: 100% !important;
    height: auto;
  }
}

.itemTips {
  font-size: 28rpx;
  background: #21263d95 !important;
  border-radius: 40rpx;
  color: #fff;
}
/deep/ .u-mode-center-box,/deep/ .u-drawer-top {
	background: transparent;
}
.poster-main {
	border-radius: 10rpx;
	background: #15151C;
}
.poster-img {
	height: 690rpx;
	display: block;
	width: 100%;
	border-radius: 10rpx 10rpx 0 0;
}
.qrCode {
	width: 124rpx;
	height: 124rpx;
}
.close {
	width: 44rpx;
	height: 44rpx;
	top: 30rpx;
	right: 30rpx;
	position: absolute;
	z-index: 2022;
}
	.invite-footer-li {
		flex-direction: column;
		margin-right: 70rpx;

		&:last-child {
			margin-right: 0;
		}

		image {
			width: 92rpx;
			height: 92rpx;
			margin-bottom: 20rpx;
		}
	}
</style>
